<template>
	<view>
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="">
			<u-sticky bgColor="#fff">
				<view class="search">
					<view class="timeTitle">
						{{timeText}}
					</view>
					<u-icon size="25" name="list-dot" @click="selectPro"></u-icon>
				</view>
				<u-picker :show="pro_show" ref="uPicker" :columns="pro_columns" keyName="name" closeOnClickOverlay
					@confirm="changeProduct" @cancel="pro_show = false" @close="pro_show = false"></u-picker>
			</u-sticky>
			<view class="detailed_box">
				<view v-if="all_num > 0" class="detailed_list">
					<view class="detailed_item" v-for="(item, index) in data" :key="index">
						<view class="detailed_item_top">
							<view class="">
								<u-icon size="16" :name="iconUrl"></u-icon>
								<text style="margin-left: 20rpx;">{{item.name}} ( {{item.transaction_rate}} )</text>
							</view>
							<text>{{item.transaction_amount}}</text>
						</view>
						<u-line dashed></u-line>
						<view class="detailed_item_text">
							<text><!-- {{item.transaction_type}} --></text>
							<text>{{item.trading_time}}</text>
						</view>
					</view>
				</view>
				<u-empty v-else mode="list" icon="../../../../static/Empty/data_null.png">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request5.js');
	export default {
		data() {
			return {
				pro_show: false,
				loadding: true,
				pro_columns: [[{
					id: 1,
					name: '今日'
				},{
					id: 2,
					name: '本月'
				},{
					id: 3,
					name: '上月'
				}]],
				data: [],
				page: 1,
				bottom: true,
				all_total: '0',
				all_num: 0,
				type: [0],
				timeType: 1,
				timeText: '今日',
				iconUrl: '',
			}
		},
		onLoad(e) {
			if (e.type) {
				this.type = [e.type]
				this.timeType = this.pro_columns[0][e.type].id
				this.timeText = this.pro_columns[0][e.type].name
			}
			this.loadData()
			this.iconUrl = util.API_URL + '/assets/img/pos.png'
		},
		methods: {
			//数据列表
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getTranDetails',
					data: {
						page: this.page,
						page_size: 15,
						time_type: this.timeType,
					},
					header: {
						'token': userinfo.token
					}
				});
				uni.hideLoading()
				this.loadding = false
				if (res.code == 1) {
					this.data = res.data
					this.all_num = res.data.length
				}
			},
			// 选择时间
			selectPro() {
				this.pro_show = true
			},
			// 选择时间
			changeProduct(e) {
				this.pro_show = false
				if (this.timeType != e.value[0].id) {
					this.timeType = e.value[0].id
					this.timeText = e.value[0].name
					this.loadData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.btn {
		display: flex;
		align-items: center;

		text {
			width: 50%;
			padding: 30rpx 0;
			text-align: center;
		}

		text:nth-child(1) {
			background-color: #eee;
		}

		text:nth-child(2) {
			background-color: #55aaff;
			color: #fff;
		}
	}

	.search {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		
		.timeTitle {
			color: #909399;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.sticky_screen {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		padding-bottom: 20rpx;

		text {
			background-color: #55aaff;
			color: #fff;
			border-radius: 100rpx;
			padding: 10rpx 20rpx;
			font-size: 24rpx;
		}
	}

	.detailed_box {
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.detailed_card {
			padding: 30rpx;
			border-radius: 15rpx;
			box-shadow: 7px 0px 30px -18px #888888;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: url('@/static/total_bgimg.png') no-repeat center;

			.detailed_card_title {
				color: #ffffff;
				display: flex;
			}

			.card {
				font-size: 28rpx;
				color: #ffffff;
			}

			h2 {
				font-weight: 500;
				font-size: 42rpx;
				margin: 20rpx 0;
				color: #ffffff;
			}
		}

		.detailed_list {
			border-radius: 15rpx;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;

			.detailed_item {
				padding: 20rpx;
				box-shadow: 7px 0px 30px -18px #888888;
				margin-bottom: 30rpx;
				background-color: #fff;

				view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #333;
					font-size: 32rpx;
				}
				
				.detailed_item_top {
					padding-bottom: 20rpx;
				}

				.detailed_item_text {
					font-size: 26rpx;
					color: #666;
					margin-top: 20rpx;
				}
			}

			.detailed_item:last-child {
				margin-bottom: 0;
				border-bottom: none;
			}
		}
	}
</style>